import React, { useState, useEffect } from "react";
// import "./LeftSection.css";
import { Canvas } from "@react-three/fiber";
import { useGLTF, OrbitControls, useAnimations } from "@react-three/drei";

// 定义模型对象的类型
interface ModelInfo {
  id: number;
  path: string;
  movements: string[];
}

// 只保留一个角色的模型信息
const modelList: ModelInfo[] = [
  {
    id: 1,
    path: "/src/models/xg.glb",
    movements: [
      "/src/models/xxg.glb",
      "/src/models/xxg2.glb",
      "/src/models/xxg1.glb",
    ],
  },
];

// 定义 Model 组件的 props 类型
interface ModelProps {
  modelPath: string;
}

const Model: React.FC<ModelProps> = ({ modelPath }) => {
  const { scene, animations } = useGLTF(modelPath);
  const { actions } = useAnimations(animations, scene);

  useEffect(() => {
    // 播放第一个动画
    if (actions && actions[animations[0].name]) {
      actions[animations[0].name].play();
    }
  }, [actions, animations]);

  return <primitive object={scene} scale={[2, 2.7, 2]} position={[0, -3, 0]} />;
};

// 定义 LeftSection 组件
const LeftSection: React.FC = () => {
  const [selectedMovement, setSelectedMovement] = useState(
    modelList[0].movements[0]
  );

  const handleMovementChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedMovement(e.target.value);
  };

  return (
    <div className="LeftSection">
      {/* 移除角色下拉菜单 */}
      {/* 动作下拉菜单 */}
      <select onChange={handleMovementChange} value={selectedMovement}>
        {modelList[0].movements.map((movement, index) => (
          <option key={index} value={movement}>
            动作 {index + 1}
          </option>
        ))}
      </select>

      <Canvas>
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} />
        <Model modelPath={selectedMovement} />
        <OrbitControls />
      </Canvas>
    </div>
  );
};

export default LeftSection;
